<template>
    <div>
        <li v-for="(item,index) in list" :key="item.id">
            {{item.title}}
             <button @click="handleDelete(index)">删除</button>
        </li>
    </div>
</template>
<script>
// 借助event.js实现兄弟组件通信
import event from './event'
    export default {
        name: 'List',
        // 简单设置从父组件接受的数据        
        props:['list'],
        // 复杂数据，可以定义默认值
        // props: {
        //      list:{
        //          type:Array,
        //          default(){
        //              return []
        //          }
        //      }
        // },
        methods: {
            handleDelete(item){
                console.log(item)
                this.$emit('delete',item)
            },
            // 用函数的方式是为了方便解绑
            addTitleHander(title){
                console.log('on add title',title)
            }
        },
        mounted() {
            // 通过引入的event作为中转站，在组件初始化的时候绑定一个自定义事件，监听兄弟组件
            event.$on('onAddTitle',this.addTitleHander)
        },
        beforeDestroy() {
            // 解绑自定义事件,及时销毁，可能会造成内存泄漏
            event.$off('onAddTitle',this.addTitleHander)
        },
    }
</script>
<style>

</style>